<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<%@page import="ewa.memory.api.Card"%>
<%@page import="ewa.memory.api.Manager"%>

<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de" lang="de">
	<head>
		<title>EWA Memory :: Spiel 1</title>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
		<meta name="description" content="Das EWA Memory, ein Spass der niemals endet."/>
		<meta name="keywords" content="Spiel EWA memory"/>
		<meta name="language" content="de-AT"/>
		<link rel="stylesheet" type="text/css" href="styles/screen.css"/>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<div id="teaser">
				</div>
				<h1>EWA Memory</h1>
			</div>
			<ul class="accessibility">
				<li><a href="#navigation" accesskey="1">Navigation</a></li>
				<li><a href="#board" accesskey="0">Spielbrett</a></li>
				<li><a href="#score" accesskey="2">Spielstand</a></li>
			</ul>
			<div id="body">
				<div id="navigation">
					<h2 class="accessibility">Navigation</h2>
					<ul>
						<li><a href="#">Userdaten &auml;ndern</a></li>
						<li><a href="#">Zur&uuml;ck zur Lounge</a></li>
						<li><a href="#">Ausloggen</a></li>
					</ul>
				</div>
				<hr class="accessibility" />
				<div id="main">
					<jsp:useBean id="manager" class="ewa.memory.api.Manager" scope="session" />
					<div id="info_area">
						<h2>Spielstand</h2>
						<table id="score" summary="Diese Tabelle zeigt den aktuellen Spielstand">
							<tbody>
								<tr>
									<th class="accessibility">Label</th>
									<th>Du</th>
									<th>Gegner</th>
								</tr>
								<tr>
									<th class="label">Paare</th>
									<td><%= manager.getFoundPairs() %></td>
									<td>N/A</td>
								</tr>
								<tr>
									<th class="label">Versuche</th>
									<td><%= manager.getTries() %></td>
									<td>N/A</td>
								</tr>
								<tr>
									<th class="label">Zeit</th>
									<td><%=  Math.round(manager.getPlayTime()/60000)%>:<%= Math.round((manager.getPlayTime()-(Math.round(manager.getPlayTime()/60000)*60000))/1000) %></td>
									<td>N/A</td>
								</tr>
							</tbody>
						</table>
						<h2>Spielinformationen</h2>
						<table id="game_info" summary="Diese Tabelle zeigt weitere Informationen zum aktuellen Spiel">
							<tbody>
								<tr class="accessibility">
									<th>Information</th>
									<th>Wert</th>
								</tr>
								<tr>
									<th>Restliche Paare</th>
									<td><%= manager.getRemainingPairs() %></td>
								</tr>
								<tr>
									<th xml:lang="en">Theme</th>
									<td>Alternative Rock</td>
								</tr>
							</tbody>
						</table>
						<h2>Top-K&uuml;nstler</h2>
						<ul id="top_artists">
							<li><a href="http://www.last.fm/music/Muse"><img src="img/muse.jpg" alt="Muse"/> Muse</a></li>
							<li><a href="http://www.last.fm/music/Placebo"><img src="img/placebo.jpg" alt="Placebo	"/> Placebo</a></li>
							<li><a href="http://www.last.fm/music/Radiohead"><img src="img/radiohead.png" alt="Radiohead"/> Radiohead</a></li>
						</ul>
					</div>
					<hr class="accessibility" />
					<div id="board">
						<h2 class="accessibility">Spielbrett</h2>
						<table summary="Diese Tabelle stellt das Memory-Brett mit den Karten dar">
							<tr class="accessibility">
								<th></th>
								<th>Kartenspalte 1</th>
								<th>Kartenspalte 2</th>
								<th>Kartenspalte 3</th>
								<th>Kartenspalte 4</th>
							</tr>
							<% for (int i = 0; i < manager.getRows(); i++) {
								%><tr><th class="accessibility">Kartenzeile <%= i+1 %></th><%
								for (int j = 0; j < manager.getCols(); j++) {
									if (manager.isShown(i, j)) {
										Card c = manager.getCard(i,j);
										if (manager.getState() == Manager.State.MISMATCH && (c == manager.getFirstUncovered() || c == manager.getSecondUncovered())) {
											%><td class="visible_card"><a href="?uncover=<%= i %>,<%= j %>"><img src="<%= c.getImgURL() %>" alt="<%= c.getName() %>"/></a></td><%
										} else {
											%><td class="visible_card"><img src="<%= c.getImgURL() %>" alt="<%= c.getName() %>"/></td><%
										}
									} else {
										%><td><a href="?uncover=<%= i %>,<%= j %>"><img src="img/card_background.png" alt="Unbekannte Karte"/></a></td><%
									}
								}
								%></tr><%
							} %>
						</table>
					</div>
				</div>
			</div>
			<div id="footer">
				<p>&copy; 2010 EWA Memory.</p>
			</div>
		</div>
	</body>
</html>
